import React, { useEffect } from 'react';
import { useParams } from 'react-router-dom';
import { observer } from 'mobx-react-lite';
import TopicStore from '@/store/topic';

const topicStore = new TopicStore();

// 主题详情页
const TopicPage = observer(() => {
    const { id } = useParams();
    useEffect(() => {
        if (id) {
            topicStore.getTopic(id, {
                mdrender: false,
            });
        }
    }, [id]);

    return (
        <main className='container w-full h-full bg-white overflow-auto '>
            <h1>标题 {topicStore.topic?.title}</h1>
            <div>
                <span>作者</span>
                <div>
                    <img className='avatar-url w-4 h-4' src={topicStore.topic?.author?.avatar_url} alt='' />
                    <span>{topicStore.topic?.author?.loginname}</span>
                </div>
            </div>
            <div>发布时间 {topicStore.topic?.create_at}</div>
            <div>阅读 {topicStore.topic?.visit_count}</div>
            <div>回复 {topicStore.topic?.reply_count}</div>
            <div>内容 {topicStore.topic?.content}</div>
            <div>
                回复
                <ul>
                    {topicStore.topic?.replies?.map((reply: any) => {
                        return (
                            <li key={reply.id}>
                                <div>
                                    <img className='avatar-url w-4 h-4' src={reply.author.avatar_url} alt='' />
                                    {reply.author.loginname}
                                </div>
                                <div>{reply.content}</div>
                                <div>{reply.create_at}</div>
                            </li>
                        );
                    })}
                </ul>
            </div>
        </main>
    );
});

export default TopicPage;
